@extends('layout.home.main')
@section('content')
    <!-- Latest Stories -->
    <section class="section-wrap latest-stories pb-0">
        <div class="container-fluid nopadding">

            <div class="heading-row text-center mb-40">
                <h2 class="heading uppercase small">最新</h2>
            </div>

            <div id="main-slider" class="flickity-slider-wrap">
                @foreach($articles as $article)
                    <div class="gallery-cell">
                        <article>
                            <a href="/home/article/{{$article->id}}" class="entry-img">
                                <img src="{{$article->image}}" alt="">
                                <span class="entry-category">{{$article->cate->name}}</span>
                            </a>
                            <div class="entry text-center">
                                <h4 class="entry-title uppercase"><a
                                            href="{{$article->image}}">{{$article->title}}</a></h4>
                                <span class="entry-date">{{$article->created_at->diffForHumans()}}</span>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section> <!-- end latest stories -->

    <!-- Content -->
    <section class="content blog-standard">
        <div class="container relative">
            <div class="row">

                <!-- post content -->
                <div class="col-md-9 post-content mb-50">

                    <!-- large post -->
                    @foreach($cates as $cate)
                        @if($cate->article->count())
                            <article class="entry-item large-post">

                                <div class="entry-header">
                                    <a href="#" class="entry-category">{{$cate->name}}</a>
                                    <h2 class="entry-title">
                                        <a href="blog-single.html">{{$cate->topArticle()->title}}</a>
                                    </h2>
                                </div>

                                <div class="entry-img">
                                    <a href="/home/article/{{$cate->topArticle()->id}}">
                                        <img src="{{$cate->topArticle()->image}}" alt="">
                                    </a>
                                </div>
                                <div class="entry-wrap">
                                    <div class="entry">

                                        {{--<div class="entry-content">--}}
                                        {{--<p>--}}
                                        {{--{{str_limit($cate->topArticle()->content,30,'...')}}--}}
                                        {{--</p>--}}
                                        {{--<div class="text-center">--}}
                                        {{--<a href="blog-single.html" class="read-more underline-link">Read--}}
                                        {{--More</a>--}}
                                        {{--</div>--}}
                                        {{--</div>--}}

                                        <div class="entry-meta-wrap clearfix">
                                            <ul class="entry-meta">
                                                <li class="entry-date">
                                                    <a href="#">{{$cate->topArticle()->created_at->diffForHumans()}}</a>
                                                </li>
                                                <li class="entry-comments">
                                                    <a href="blog-single.html">{{$cate->topArticle()->answers->count()}}
                                                        Comments</a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </article> <!-- end large post -->

                            <!-- grid posts -->
                            <div class="row items-grid">

                                @foreach($cate->listArticle() as $article)
                                    <div class="col-sm-6">
                                        <article class="entry-item">
                                            <div class="entry-img">
                                                <a href="/home/article/{{$article->id}}">
                                                    <img src="{{$article->image}}" alt="">
                                                </a>
                                            </div>
                                            <div class="entry-header">
                                                <a href="#" class="entry-category">{{$article->cate->name}}</a>
                                                <h2 class="entry-title">
                                                    <a href="blog-single.html">{{$article->title}}</a>
                                                </h2>
                                            </div>
                                            <div class="entry-wrap">
                                                <div class="entry">
                                                    {{--<div class="entry-content">--}}
                                                    {{--<p>--}}
                                                    {{--{!! str_limit($article->content,30,'...') !!}--}}
                                                    {{--</p>--}}
                                                    {{--</div>--}}
                                                    <div class="entry-meta-wrap clearfix">
                                                        <ul class="entry-meta">
                                                            <li class="entry-date">
                                                                <a href="#">{{$article->created_at->diffForHumans()}}</a>
                                                            </li>
                                                            <li class="entry-comments">
                                                                <a href="blog-single.html">{{$article->answers->count()}}
                                                                    Comments</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            </div> <!-- end grid posts -->
                        @endif
                    @endforeach
                </div> <!-- end col -->
@endsection
            <!-- Sidebar -->
@section('sidebar')
    @include('layout.home.sidebar')

@endsection
